import React,{Component} from 'react';
import 'antd/dist/antd.css';
// import { Input, Button,List, Typography } from 'antd'
import TodoListUI from './todoListUI.js';
import store from './store/index.js'
import { gethandleInputChangAction ,gethandleBtnClick ,gethandleItemClick,getTodoList} from './store/actionCreators'
class TodoListA extends Component { //瑞哎的React 瑞达克斯 Redux
 	constructor(props){ // 啃食踹咳得 默认的 优于其他先执行
		super(props)
		this.state=store.getState();
		this.handleInputChange=this.handleInputChange.bind(this);
		this.handleBtnClick=this.handleBtnClick.bind(this);
		this.handleItemClick=this.handleItemClick.bind(this);
		this.handleStoreChange=this.handleStoreChange.bind(this);
		store.subscribe(this.handleStoreChange)
	}
	render(){//软的
		return (
			<TodoListUI 
			inputValut={this.state.inputValue}
			list={this.state.list}
			handleInputChange={this.handleInputChange}
			handleBtnClick={this.handleBtnClick}
			handleItemClick={this.handleItemClick}
			/>
		)
	
	}
	componentDidMount(){
		const action=getTodoList()
		store.dispatch(action)
	}
	

	handleInputChange(e){//发起修改
		const action=gethandleInputChangAction(e.target.value)
		store.dispatch(action)
	}
	handleStoreChange(){//修改数据
		this.setState(store.getState())
	}
	handleBtnClick(){//button点击事件
		const action=gethandleBtnClick()
		store.dispatch(action)
	}
	handleItemClick(index){//删除事件
		const action=gethandleItemClick(index)
		store.dispatch(action)
	}
	
}
export default TodoListA;